<template>
    <view :style="Theme">
        <uni-nav-bar :statusBar="true" :fixed="true" :title="$t('tab.my.title')" />

        <!-- 用户信息 -->
        <view class="user-info" :style="userInfoStyle">
            <image class="avatar" src="/static/user/user.jpg" mode="aspectFill" />
            <view class="username">用户名称</view>
        </view>

        <!-- 个人中心功能 -->
        <view class="menu">
            <menu-list left-icon="icon-shezhi" :menu-name="$t('tab.my.setting')" right-icon="icon-right"
                @onClick="handleMenuClick('setting')" />
        </view>
    </view>
</template>

<script setup>
    import { setTabBar } from '@/theme/tabbar'
    import MenuList from '@/components/menuList/menuList.vue'

    const { Theme } = useTheme()
    const { proxy } = getCurrentInstance()


    // 用户信息区域样式
    const userInfoStyle = computed(() => ({
        background: `url(../../../static/user/userBg.png), ${useThemeStore().bgImage}`,
        backgroundSize: '100%'
    }))

    // 菜单点击处理
    const handleMenuClick = type => {
        const routes = { setting: '/my/setting' }
        proxy.sjuNav.navigateTo(routes[type])
    }

    onShow(() => {
        setTabBar()
        proxy.sjuLogin.checkLogin('/tab/my')
    })
</script>

<style lang="scss">
    .user-info {
        width: 100%;
        height: 300rpx;
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 30rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            margin-right: 30rpx;
        }

        .username {
            color: var(--inverse-text-color);
            font-size: 36rpx;
            font-weight: bold;
        }
    }

    .menu {
        width: 100%;
        margin-top: 20rpx;
        background-color: var(--accent-bg-color);
        overflow: hidden;
    }
</style>